<!doctype html>
<html lang="us">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Example Page</title>
	<link href="theme/custom/jquery-ui.min.css" rel="stylesheet">
	<!--<link href="theme/redmond/jquery-ui.min.css" rel="stylesheet">-->
	<link href="theme/jquery-ui-ext.css" rel="stylesheet">
	<link href="theme/icon.css" rel="stylesheet">
	<style>
	body{
		margin: 50px;
	}
	</style>
	<script src="jquery.js"></script>
	<script src="jquery-ui.js"></script>
	
	<script type="text/javascript" src="locale/jquery-ui-lang-zh_CN.js"></script>
	<script type="text/javascript" src="jquery-ui-ext.js"></script>
	<script type="text/javascript">
		$(function() {

			$("#alert").click(function() {
				$.messager.alert("系统提示：", "您的消息已经过期", function() {
					alert("按了确定");
				});
			});

			$("#confirm").click(function() {
				$.messager.confirm("请确认：", "确定要删除吗\ndkdkdkkd", function(isOk) {
					alert("按了" + (isOk ? "确定" : "取消"));
				});
			});

			$("#diy").click(function() {
				$.messager.show("自定义提示：", "提示内容", ["按钮1","按钮2","按钮3"], function(index) {
					if(index > -1) {
						alert("按了按钮" + (index + 1));
					} else {
						alert("按了关闭按钮！");
					}
				}).icon(ICON_MESSAGER_CONFIRM);
			});
			$("#headerCollapse").click(function() {
				$("[ui=layout]").layout("collapse", "north");
			});
			$("#checkedButton").click(function() {
				var rows = $("[ui=datagrid]").datagrid("getCheckedRows");
				alert("选择记录数：" + rows.length + ",第一条记录name：" + (rows.length > 0 ? rows[0].name : ""));

			});
			$("#disenBtn").click(function() {
				if($("#date").datebox("isEnable")) {
					$("#date").datebox("disable");
				} else {
					$("#date").datebox("enable");
				}
			});
		});
	</script>
</head>
<body>
	<h1>拓展提示框：</h1>
	<div><button id="alert" ui="button">alert</button></div>
	<div><button id="confirm" ui="button">confirm</button></div>
	<div><button id="diy" ui="button">diy</button></div>

	<h1>拓展布局：</h1>
	<button id="headerCollapse" ui="button">折叠Header</button>
	<div ui="layout" style="width:800px;height:400px;">
		<div options="region:'north',height:40" style="background-color:red;">
			header
		</div>
		<div options="region:'west',split:true,width:200" style="background-color:blue;">
			左侧
		</div>
		<div options="region:'east',split:true,width:200" style="background-color:yellow;">
			右侧
		</div>
		<div options="region:'south',split:true,height:40" style="background-color:green;">
			<div ui="pagination" options="total:30,pageSize:10,onTurnPage:function(page, pageSize) {alert(page +'-,-'+ pageSize)}"></div>
		</div>
		<div options="region:'center'">
			中间
		</div>
	</div>
	
	<h1>拓展列表：</h1>
	<script type="text/javascript">
		$("#content").scroll(function(event) {
			$("#header").css("left", -this.scrollLeft);
			$("#indexContent").css("top", -this.scrollTop);
		});
		var data = {
			rows:[
				
			]
		};
		for(var i=0; i<15; i++) {
			data.rows.push({
				name:"John Doe" + i,
				email:"john.doe@example.com",
				password:"123456"
			});
		}
	</script>
	<button id="checkedButton" ui="button">获取选中信息</button>
	<div style="width:800px;height:400px;">
	<table ui="datagrid" options="rownumbers:true,checkbox:true,pagination:true,pageSize:12,fit:true,data:data">
		<thead>
		  <tr>
			<th options="field:'name',width:100">Name</th>
			<th options="field:'email',width:300,formatter:function(index, row) {return row.name + '-' + row.email;}">Email</th>
			<th options="field:'password',width:100,align:'left',cellAlign:'center'">Password</th>
		  </tr>
		</thead>
	 </table>
	 </div>
	 <br/>

	<h1>拓展DateBox：</h1>
	
	<input id="date" type="text" ui="datebox" value="2015-12-17" options="showAnim:'slide'" />
	<button id="disenBtn" ui="button">disable/enable</button>

</body>
</html>
